<template>
  <div id="app" class="skEnvironmentTable">
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :xl="4" :lg="5" :md="5" :sm="5">
              <a-form-item>
                <!-- <a-select placeholder="请选择月份">
                  <a-select-option v-for="item in 6" :value="item"> 本学期 {{ item }}月份 </a-select-option>
                </a-select> -->
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="8">
              <a-form-item>
                <a-cascader :options="options" placeholder="请选择历史学期" change-on-select />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->
      <!-- table区域-begin -->

      <div>
        <a-table
          ref="table"
          size="middle"
          :scroll="{ x: true }"
          bordered
          rowKey="key"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          :loading="loading"
          class="j-table-force-nowrap"
          @change="handleTableChange"
        >
          <template v-for="slotItem of slots" :slot="slotItem" slot-scope="text, record, index">
            <slot :name="slotItem" v-bind="{ text, record, index }">
              <span>{{ text }}</span>
            </slot>
          </template>
        </a-table>
      </div>
    </a-card>
  </div>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mixinDevice } from '@/utils/mixin'
const data = [
  {
    key: 'row1',
    beforeUpdateLevel: '温度（℃）',
    data1: 25,
    data2: '升',
    data3: '升',
    data4: '未设置'
  },
  {
    key: 'row2',
    beforeUpdateLevel: '湿度（%）',
    data1: 25,
    level_2: '保',
    level_3: '升',
    level_4: '升',
    level: 2
  },
  {
    key: 'row3',
    beforeUpdateLevel: '二氧化碳',
    data1: 25,
    level_2: '未设置',
    level_3: '未设置',
    level_4: '升',
    level: 3
  },
  {
    key: 'row4',
    beforeUpdateLevel: 'TVOC',
    data1: 25,
    level_2: '未设置',
    level_3: '未设置',
    level_4: '未设置',
    level: 4
  },
  {
    key: 'row54',
    beforeUpdateLevel: 'PM2.5',
    data1: 25,
    level_2: '未设置',
    level_3: '未设置',
    level_4: '未设置',
    level: 4
  },
  {
    key: 'row6',
    beforeUpdateLevel: 'PM10',
    data1: 25,
    level_2: '未设置',
    level_3: '未设置',
    level_4: '未设置',
    level: 4
  },
  {
    key: 'row7',
    beforeUpdateLevel: 'CH2O',
    data1: 25,
    level_2: '未设置',
    level_3: '未设置',
    level_4: '未设置',
    level: 4
  }
]
export default {
  name: 'skEnvironmentTable',
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      dataSource: data,

      columns: [
        {
          title: (
            <div class="headerCell">
              <div class="afer">日期</div>
              <div class="before">环境</div>
            </div>
          ),
          dataIndex: 'beforeUpdateLevel',
          key: 'beforeUpdateLevel',
          // 固定分组这一栏的宽度
          width: 100,
          align: 'center'
        }
      ],
      options: [
        {
          value: 'zhejiang',
          label: '2019学年',
          children: [
            {
              value: 'hangzhou',
              label: '上学期',
              children: [
                {
                  value: 'xi2hu',
                  label: '2019年8月'
                }
              ]
            },
            {
              value: 'hangzhou1',
              label: '下学期',
              children: [
                {
                  value: 'xihu',
                  label: '2019年9月'
                }
              ]
            }
          ]
        },
        {
          value: 'jiangsu',
          label: '2020学年',
          children: [
            {
              value: 'nanjing1',
              label: '上学期',
              children: [
                {
                  value: 'zhonghuamen1',
                  label: '2020年8月'
                }
              ]
            },
            {
              value: 'nanjing',
              label: '下学期',
              children: [
                {
                  value: 'zhonghuamen',
                  label: '2020年9月'
                }
              ]
            }
          ]
        }
      ],
      url: {
        list: ''
      }
    }
  },
  components: {},

  filters: {},

  computed: {
    slots() {
      let slots = []
      for (let column of this.columns) {
        if (column.scopedSlots && column.scopedSlots.customRender) {
          slots.push(column.scopedSlots.customRender)
        }
      }
      return slots
    }
  },

  created() {
    let date = new Date()
    date.setMonth(date.getMonth() + 1)
    date.setDate(0)
    let d = date.getDate()
    for (let i = 1; i <= d; i++) {
      this.columns.push({
        title: i + '日',
        dataIndex: 'data' + i,
        align: 'center',
        scopedSlots: { customRender: i }
      })
    }
  },

  activated() {},

  mounted() {
    console.log(this.monthNumber('2023-01-03', '2023-05-06'))
  },

  methods: {
    monthNumber(date1, date2) {
      const dateOne = new Date(date1)
      const dateTwo = new Date(date2)
      // 第一个日期的年和月
      const yearOne = dateOne.getFullYear()
      const monthOne = dateOne.getMonth() + 1
      // 第二个日期的年和月
      const yearTwo = dateTwo.getFullYear()
      const monthTwo = dateTwo.getMonth() + 1
      // 两个日期的月份数
      const oneMonthNum = yearOne * 12 + monthOne
      const twoMonthNum = yearTwo * 12 + monthTwo
      return Math.abs(oneMonthNum - twoMonthNum)
    }
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */

.headerCell {
  // 画三角形
  border-top: 43px rgb(250 250 250) solid;
  /*上边框宽度等于表格第一行行高*/
  width: 0px;
  /*让容器宽度为0*/
  height: 0px;
  /*让容器高度为0*/
  border-left: 100px rgb(250 250 250) solid;
  /*左边框宽度等于表格第一行第一格宽度*/
  position: relative;
  .afer {
    position: absolute;
    top: -48px;
    left: -54px;
    width: 60px;
    color: #666666;
  }
  .before {
    position: absolute;
    top: -14px;
    left: -103px;
    width: 60px;
    color: #666666;
  }
  // 伪元素画分割线
  &::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 122px;
    top: -80px;
    left: -52px;
    background-color: rgb(228, 225, 225);
    display: block;
    transform: rotate(-60deg);
  }
}
</style>
